<!--
 * @Author: houmin 745762351@qq.com
 * @Date: 2023-09-10 15:32:13
 * @LastEditors: houmin 745762351@qq.com
 * @LastEditTime: 2023-09-11 09:00:48
 * @FilePath: \tch-h5\src\components\order-room-info\OrderRoomInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <p class="title">订房信息</p>
  <div class="details">
    <div class="head">
      <p class="sub-title">精品大床房</p>
      <van-stepper class="num-input" v-model="roomNum" />
    </div>
    <div class="room-list" v-for="(item, index) in roomList" :key="item.id">
      <van-field
        input-align="right"
        v-model="item[name]"
        placeholder="请输入入住人姓名"
        :label="'房间' + (index + 1)"
      />
    </div>
    <div class="phone">
      <van-field
        input-align="right"
        v-model="tel"
        type="tel"
        placeholder="请输入联系电话"
        label="联系电话"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineEmits } from "vue";
const tel = ref();
const roomNum = ref(1);
const roomList = ref([
  {
    id: new Date().getTime(),
    name: "",
  },
]);
const emit = defineEmits(["roomInfo"]);
watch(roomNum, (value) => {
  if (value > roomList.value.length) {
    roomList.value.push({
      id: new Date().getTime(),
      name: "",
    });
  } else {
    roomList.value = roomList.value.slice(0, -1);
  }
  emit("roomInfo", { roomList: roomList, tel: tel, roomNum: roomNum });
});
</script>

<style lang="scss" scoped>
.van-cell {
  background: transparent;
}
.title {
  margin-left: 15px;
  font-size: 1.4rem;
  color: #999;
}
.details {
  margin: 15px;
  padding: 15px;
  background: #fffffc;
  box-shadow: 0px 7px 15px 0px rgba(54, 141, 88, 0.05);
  border-radius: 10px;
  .head {
    position: relative;
  }
  .sub-title {
    width: 100%;
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: bold;
  }
  .num-input {
    position: absolute;
    width: auto;
    padding: 0;
    right: 0;
    top: -4px;
  }
}
.room-list,
.phone {
  margin: 10px auto 15px;
  background: rgba(79, 172, 145, 0.05);
  border-radius: 5px;
}
.phone {
  margin-bottom: 0;
}
</style>